/**
 * 各种画echarts图表的方法都封装在这里,只是简单的封装做一个统一管理
 * 注意：这里echarts没有采用按需引入的方式，只是为了方便学习
 * 具体配置项请参考Echarts官网
 */
import * as echarts from "echarts";
const install = function (Vue) {
  Object.defineProperties(Vue.prototype, {
    $chart: {
      get() {
        return {
          newline1: function (id, xdata, ydata, xAxisData, that, isno) {
            this.chart = echarts.init(document.getElementById(id));
            this.chart.clear();
            const optionData = {
              tooltip: {
                trigger: "axis",
              },
              legend: {
                orient: "horizontal",
                itemGap: 40,
                textStyle: {
                  color: "#333",
                },
                top: "20px",
                right: "10%",
                itemHeight: 16,

                fontSize: 12,
                padding: [0, 0, -3, 0], // 修改文字和图标距离
              },
              toolbox: {
                feature: {
                  saveAsImage: {},
                },
              },
              xAxis: {
                data: xdata,
              },
              yAxis: {
                splitLine: {
                  show: isno,
                },
              },
              series: [
                {
                  data: ydata,
                  type: "line",
                  areaStyle: {},
                  itemStyle: {
                    normal: {
                      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                          offset: 0,
                          color: "#73DEB3",
                        },
                        {
                          offset: 1,
                          color: "#83E1BB",
                        },
                      ]),
                    },
                  },
                },
              ],
            };
            this.chart.setOption(optionData);
            let _this = this;
            window.addEventListener("resize", () => {
              if (_this.chart) {
                _this.chart.resize();
              }
            });
            this.chart.on("click", function (params) {
              console.log(params);
            });
          },
          //线形图
          line1: function (id, xdata, ydata, data3, sdata, that, isno) {
            this.chart = echarts.init(document.getElementById(id));
            this.chart.clear();
            const optionData = {
              tooltip: {
                trigger: "axis",
              },
              legend: {
                orient: "horizontal",
                itemGap: 40,
                textStyle: {
                  color: "#333",
                  // ...
                },
                top: "20px",
                right: "10%",
                itemHeight: 16,

                fontSize: 12,
                padding: [0, 0, -3, 0], // 修改文字和图标距离
                // ...
              },
              toolbox: {
                feature: {
                  saveAsImage: {},
                },
              },
              xAxis: {
                data: xdata,
              },
              yAxis: {
                splitLine: {
                  show: isno,
                },
                // data: [0, 500, 1000, 1500,1800]
              },
              series: [
                {
                  data: ydata,
                  type: "line",
                  areaStyle: {},
                  itemStyle: {
                    normal: {
                      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                          offset: 0,
                          color: "#73DEB3",
                        },
                        {
                          offset: 1,
                          color: "#83E1BB",
                        },
                      ]),
                    },
                  },
                },
                {
                  data: data3,
                  type: "line",
                  areaStyle: {},
                  itemStyle: {
                    normal: {
                      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                          offset: 0,
                          color: "#FEC949",
                        },
                        {
                          offset: 1,
                          color: "#FEC949",
                        },
                      ]),
                    },
                  },
                },
              ],
            };
            this.chart.setOption(optionData);
            let _this = this;
            window.addEventListener("resize", () => {
              if (_this.chart) {
                _this.chart.resize();
              }
            });
            this.chart.on("click", function (params) {
              console.log(params);
            });
          },

          //线形图
          activeShadow: function (
            id,
            xdata,
            ydata,
            lineColor,
            shadowColor,
            yName,
            titlename,
            that,
            isno
          ) {
            this.chart = echarts.init(document.getElementById(id));
            this.chart.clear();
            const optionData = {
              tooltip: {
                //悬浮显示
                trigger: "axis",
                show: true,
              },
              xAxis: {
                type: "category",
                boundaryGap: false,
                data: xdata,
                axisLabel: {
                  interval: 6,
                },
              },
              yAxis: {
                type: "value",
                name: yName,
              },
              series: [
                {
                  name: titlename,
                  data: ydata,
                  type: "line",
                  smooth: true,
                  lineStyle: lineColor,
                  areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: shadowColor,
                      },
                      {
                        offset: 1,
                        color: "#fff",
                      },
                    ]),
                  },
                },
              ],
            };
            this.chart.setOption(optionData);
            this.chart.on("click", function (params) {
              console.log(params);
            });
          },
          circel: function (
            id,
            xdata,
            legend,
            isshow,
            itemStyle,
            center,
            color
          ) {
            this.chart = echarts.init(document.getElementById(id));
            this.chart.clear();

            const optionData = {
              tooltip: {
                trigger: "item",
              },
              color: color,
              legend: legend,
              itemStyle: itemStyle,
              series: [
                {
                  name: "Access From",
                  type: "pie",
                  radius: ["54%", "75%"],
                  // avoidLabelOverlap: true,
                  center: center ? center : ["50%", "50%"],
                  label: {
                    show: isshow,
                  },
                  labelLine: {
                    show: true,
                  },
                  itemStyle: itemStyle,
                  data: xdata,
                },
              ],
            };
            this.chart.setOption(optionData);
            this.chart.on("click", function (params) {
              console.log(params);
            });
          },
          //渐变柱状圆角图
          columnar: function (
            id,
            data1,
            data2,
            xAxisData,
            emphasisStyle,
            xdata
          ) {
            this.chart = echarts.init(document.getElementById(id));
            this.chart.clear();
            const optionData = {
              tooltip: {
                trigger: "axis",
                axisPointer: {
                  type: "shadow",
                },
              },
              grid: {
                left: "3%",
                right: "4%",
                bottom: "3%",
                containLabel: true,
              },
              toolbox: {
                feature: {
                  saveAsImage: {},
                },
              },
              xAxis: [
                {
                  type: "category",
                  axisLabel: xAxisData,
                  data: data1,
                  axisTick: {
                    alignWithLabel: true,
                  },
                },
              ],
              yAxis: [
                {
                  type: "value",
                },
              ],

              series: [
                {
                  name: "Direct",
                  type: "bar",
                  barWidth: "20",
                  itemStyle: {
                    normal: {
                      //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
                      barBorderRadius: [10, 10, 0, 0],
                      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                          offset: 0,
                          color: "#0DADAD",
                        },
                        {
                          offset: 1,
                          color: "#3BC9C7",
                        },
                      ]),
                    },
                  },
                  data: data2,
                },
              ],
            };
            this.chart.setOption(optionData);
            let _this = this;
            window.addEventListener("resize", () => {
              if (_this.chart) {
                _this.chart.resize();
              }
            });
            this.chart.on("click", function (params) {
              console.log(params);
            });
          },
          //渐变横向柱状圆角图
          transversecolumnar: function (
            id,
            data1,
            data2,
            xAxisData,
            emphasisStyle,
            xdata
          ) {
            this.chart = echarts.init(document.getElementById(id));
            this.chart.clear();
            const optionData = {
              tooltip: {
                trigger: "axis",
                axisPointer: {
                  type: "shadow",
                },
              },
              grid: {
                left: "3%",
                right: "4%",
                bottom: "3%",
                containLabel: true,
              },
              xAxis: [
                {
                  type: "value",
                },
              ],
              yAxis: [
                {
                  type: "category",
                  axisLabel: xAxisData,
                  data: data1,
                  axisTick: {
                    alignWithLabel: true,
                  },
                },
              ],

              series: [
                {
                  name: "Direct",
                  type: "bar",
                  barWidth: "15",
                  itemStyle: {
                    normal: {
                      //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
                      barBorderRadius: [0, 10, 10, 0],
                      color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                        {
                          offset: 0,
                          color: "#4096FF",
                        },
                        {
                          offset: 1,
                          color: "#869FFF",
                        },
                      ]),
                    },
                  },
                  data: data2,
                },
              ],
            };
            this.chart.setOption(optionData);

            this.chart.on("click", function (params) {
              console.log(params);
            });
          },
        };
      },
    },
  });
};
export default {
  install,
};
